<template>
    <div class="cate_list">
        <div class="w">
            <section class="content">
                <div class="left">
                        <slot name="left" >
                            <img :src="data.left_img" alt="">
                        </slot>
                </div>
                <div class="right">
                <CateCard class="aa" :data="data.data"></CateCard>
                <div class="aa">
                   <span> 浏览更多>></span>
                </div>
                </div>
            </section>
        </div>
    </div>
</template>
<script setup>
import CateCard from '@/components/CateCard.vue'
import { defineProps } from 'vue'
const props = defineProps({
    data:{
        required:true,
        type:Object,
        default:()=>{}
    }
})

</script>
<style lang="scss" scoped>
    .cate_list{
        width: 100%;
        background: rgb(233, 233, 233);
        .w{
            .top{
                height: 60px;
                // background: #ccc;
                line-height: 60px;
                font-size: 24px;
            }
            .content{
                // background: #000;
                display: flex;
                .left{
                    width: 20%;
                    // height: 630px;
                    // background: pink;
                    img{
                        width: 100%;
                        padding-right: 10px;
                    }
                }
                .right{
                    flex: 1;
                    // background: #fff;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    align-items: center;
                    .aa{
                        background: #fff;
                        width: 24%;
                        height:48%;
                        padding: 10px;
                        text-align: center;
                        color: #777;
                        font-size: 24px;
                        line-height: 260px;
                    }
                    .aa:hover{
                        box-shadow: 0 0 10px #777;
                        transform: scale(1.05);
                    }
                    .aa>span:hover{
                            color: orangered;
                        }

                }
            }
        }
    }
</style>